---
title: 集成
---

import { SiAngular, SiAstro, SiNextdotjs, SiReact, SiVuedotjs, SiWebcomponentsdotorg } from '@icons-pack/react-simple-icons'

Univer 支持与各种 UI 库和框架集成，允许您在不同的环境中使用 Univer。无论是 React、Vue 还是 Angular，Univer 都能提供无缝的集成体验。

如果你对自己所使用的框架或库已经了然于心，可以直接跳转到对应的集成指南：

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="React 集成指南"
    href="/guides/docs/getting-started/integrations/react"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Vue 集成指南"
    href="/guides/docs/getting-started/integrations/vue"
 />
  <Card
    icon={<SiWebcomponentsdotorg className="text-indigo-400" />}
    title="Web Component 集成指南"
    href="/guides/docs/getting-started/integrations/web-component"
 />
</Cards>

我们也为那些想要通过创建一个全新的项目来集成 Univer 的用户提供了一个快速起步的模板。你可以点击以下对应的链接来获取这些模板：

<Cards>
  <Card
    icon={<SiReact className="text-blue-400" />}
    title="Univer ❤️ Vite + React"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-react"
 />
  <Card
    icon={<SiAngular className="text-red-400" />}
    title="Univer ❤️ Angular"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-angular"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vue CLI + Vue@2.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue2"
 />
  <Card
    icon={<SiVuedotjs className="text-green-600" />}
    title="Univer ❤️ Vite + Vue@3.x"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-vue3"
 />
  <Card
    icon={<SiNextdotjs className="text-zinc-800 dark:text-zinc-200" />}
    title="Univer ❤️ Next.js"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-nextjs"
 />
  <Card
    icon={<SiAstro className="text-pink-400" />}
    title="Univer ❤️ Astro"
    href="https://github.com/dream-num/univer-documentation/tree/dev/examples/univer-astro"
 />
</Cards>
